<template>
  <el-form label-width="80px" size="mini">
    <el-form-item label="数据源">
      <data-source-btn/>
    </el-form-item>
    <el-form-item label="标题">
      <el-input v-model="item.dataName"></el-input>
    </el-form-item>
    <el-collapse v-model="activeNames">
      <el-collapse-item title="数值范围" name="dataRange">
        <el-form-item label="最小值">
          <el-input-number v-model="item.min" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="最大值">
          <el-input-number v-model="item.max" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="分段数">
          <el-input-number v-model="item.splitNumber" :min="3"></el-input-number>
        </el-form-item>
        <el-form-item label="单位">
          <el-input v-model="item.unit" ></el-input>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item title="全局样式" name="style">
        <el-form-item label="边框宽度">
          <el-input-number v-model="item.borderWidth" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="边框颜色">
          <el-color-picker v-model="item.borderColor"></el-color-picker>
        </el-form-item>
        <el-form-item label="背景颜色">
          <el-color-picker v-model="item.backgroundColor"></el-color-picker>
        </el-form-item>
      </el-collapse-item>
    </el-collapse>

  </el-form>
</template>
<script>
  import DataSourceBtn from '../../dataSource/button';

  export default {
    name: 'vpd-gauge-style',
    components: {
      DataSourceBtn
    },
    props: {
      item: {
        type: Object
      }
    },
    data() {
      return {
        activeNames: ['dataRange', 'style']
      }
    }
  }
</script>
